import { Button, Card, Form, List, Modal, Space, Switch } from "antd";
import { RuleConfig, RuleValue } from "./config";
import { Rule } from "./rules/types";
import { useState } from "react";
import { min_app_shell } from '@linksaas-minapp/api';
import EditParam from "./EditParam";

export interface RulePanelProps {
    ruleCfg: RuleConfig;
    ruleList: Rule[];
    onChange: (ruleCfg: RuleConfig) => void;
}

export default function RulePanel(props: RulePanelProps) {
    const [showModal, setShowModal] = useState(false);

    return (
        <>
            <Card bordered={false} extra={
                <Button onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    setShowModal(true);
                }}>增加规则</Button>
            }>
                <List rowKey="id" dataSource={props.ruleList.filter(rule => props.ruleCfg[rule.id] !== undefined)} renderItem={rule => (
                    <List.Item>
                        <Card title={rule.id} bordered={false} style={{ width: "100%" }} extra={
                            <Space size="large">
                                <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={(props.ruleCfg[rule.id] as RuleValue).active ?? false} onChange={checked => {
                                    const ruleCfg = props.ruleCfg;
                                    (ruleCfg[rule.id] as RuleValue).active = checked;
                                    props.onChange(ruleCfg);
                                }} />
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    const ruleCfg = props.ruleCfg;
                                    delete ruleCfg[rule.id];
                                    props.onChange(ruleCfg);
                                }}>删除规则</Button>
                            </Space>
                        }>
                            <p>{rule.descCn}</p>
                            <p>{rule.descEn}</p>
                            <Form labelCol={{ span: 6 }}>
                                {rule.paramList.map(param => (
                                    <Form.Item key={param.param} label={param.param}>
                                        <EditParam value={(props.ruleCfg[rule.id] as RuleValue)[param.param] ?? param.defaultValue}
                                            defaultValue={param.defaultValue} demoValue={param.demoValue} optionList={param.optionList}
                                            validValue={param.validValue} onChange={(value) => {
                                                const ruleCfg = props.ruleCfg;
                                                (ruleCfg[rule.id] as RuleValue)[param.param] = value;
                                                props.onChange(ruleCfg);
                                            }} />
                                    </Form.Item>
                                ))}
                            </Form>
                        </Card>
                    </List.Item>
                )} />

            </Card>
            {showModal == true && (
                <Modal open title="增加规则" bodyStyle={{ maxHeight: "calc(100vh - 200px)", overflowY: "auto" }} footer={null}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setShowModal(false);
                    }}>
                    <List rowKey="id" dataSource={props.ruleList.filter(rule => props.ruleCfg[rule.id] === undefined)} renderItem={rule => (
                        <List.Item>
                            <Card title={rule.id} bordered={false} style={{ width: "100%" }} extra={
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    let ruleCfg = props.ruleCfg;
                                    if (props.ruleCfg[rule.id] === undefined) {
                                        ruleCfg[rule.id] = {};
                                    }
                                    (ruleCfg[rule.id] as RuleValue).active = rule.active;
                                    for (const param of rule.paramList) {
                                        (ruleCfg[rule.id] as RuleValue)[param.param] = param.defaultValue;
                                    }
                                    props.onChange(ruleCfg);
                                    setShowModal(false);
                                }}>增加规则</Button>
                            }>
                                <p>{rule.descCn}</p>
                                <p>{rule.descEn}</p>
                                <div style={{ display: "flex", justifyContent: "flex-end", marginRight: "20px" }}>
                                    <a onClick={e => {
                                        e.stopPropagation();
                                        e.preventDefault();
                                        min_app_shell.openBrowser(rule.url);
                                    }}>查看详情</a>
                                </div>
                            </Card>
                        </List.Item>
                    )} />
                </Modal>
            )}
        </>
    )
}